<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏网页版本</title>
    <script src="./package/vue.js"></script>
    <link rel="stylesheet" href="./package/element.css">
    <link rel="stylesheet" href="./package/index.css">
</head>
<body>
    <!-- 实现随机生成1-100之间的一个整型数作为答案并保存的功能，
    经验证功能正确后使用 git commit 命令提交代码

    实现从命令行打印提示信息并接受用户猜测数字的功能，
    经验证功能正确后使用 git commit命令提交代码

    实现比较答案数字与用户猜测数字关系后打印提示信息的功能，
    经验证功能正确后使用 git commit命令提交代码

    实现在玩家测错情况下可以重复不停猜测直至猜对的功能，
    经验证功能正确后使用 git commit命令提交代码

    实现限制玩家只可以猜测7次，若7次依然未猜对，游戏结束。
    经验证功能正确后使用 git commit 命令提交代码

    实现一轮游戏结束后玩家可以通过选择决定再玩一局还是结束游戏的功能，
    经验证功能正确后使用 git commit 命令提交代码

    对整个游戏进行运行并试玩，尽量尝试各种可能的情况，
    若游戏在各种情况下均可以成功运行或正常退出而不奔溃，
    使用 git push 命令将本地仓库推送到远程仓库，检查远程仓库是否已经更新 -->

    <div id="app">
        <h1> 猜数字小游戏
             <!-- <el-button type=""
              @click="startGame=!startGame">
                 回到首页
            </el-button>  -->
        </h1>
        <div class="title"  v-if="startGame">
            <el-collapse v-model="activeNames" @change="handleChange" accordion>
                <el-collapse-item title="游戏规则" name="1">
                  <div>1. 每次生成1-100以内的数字 只有七次机会</div>
                  <div>2. 玩家需要点击按钮去猜数字 , 普通模式有提示 大小了 , 极限模式没有</div>
                  <div>2. 玩家也可以配置按钮的内容为图标 ,这样难度更高 </div>
                </el-collapse-item>
                <el-collapse-item title="可以自定义的配置文件" name="2">
                  <div>1. 程序会自动的保存你的配置参数  </div>
                  <div>2. 下次打开游戏无需配置 </div>
                  <div>3. 可以打开极限模式 , 烧脑模式 , 让你猜到头疼 </div>
                </el-collapse-item>
                <el-collapse-item title="记录你的每次游戏结果" name="3">
                  <div>1. 每次游戏结束, 不论成功或者失败都会保存你的游戏记录 </div>
                  <div>2. 使用本地存储, 不会造成数据泄露 , 不会有任何外部链接 , 安全 </div>
                </el-collapse-item>
                <el-collapse-item title="出现问题请到码云留言, 地址在下拉栏内" name="4">
                  <div>1. <a target="_blank" href="https://gitee.com/swalTldq/level-18-personal-project/tree/master/%E7%8C%9C%E6%95%B0%E5%AD%97%E6%B8%B8%E6%88%8F">
                        点击此处前往码云留言</a></div>
                  <div>2. 如果发现bug 也请到码云留言</div>
                  <div>3. 如果 想要处来新功能,新玩法也可以留言</div>
                </el-collapse-item>
                <el-collapse-item title="点击查看你的游戏生涯" name="5">
                    <el-table
                    :data="history"
                    stripe
                    style="width: 100%">
                    <el-table-column
                      prop="time"
                      label="日期">
                    </el-table-column>
                    <el-table-column
                      prop="click"
                      label="点击次数">
                    </el-table-column>
                    <el-table-column
                      prop="success"
                      label="通关">
                    <template slot-scope="scope">
                        <span v-if="history[scope.$index].success===true"> 成功 </span>
                        <span v-if="history[scope.$index].success===false"> 失败 </span>
                        <span v-else> 太丢人 </span>
                    </template>
                    </el-table-column>
                  </el-table>


                </el-collapse-item>
              </el-collapse>
            <el-button type="info" plain @click="startGame=!startGame">点击开始游戏</el-button>
        </div>
        <h1 class="loss" v-if="loss">失败</h1>

        <div class="game" v-if="!startGame">
            <h3> 
                <!-- <el-button type="info" plain @click="startGame=!startGame">返回主菜单</el-button> -->
                <div>
                    答案:
                    <span v-if="right">{{answer}}</span> 
                    <span v-if="!right"> 你猜? </span> 
                </div> 
            </h3> 
            <div class="main">
                <div 
                class="button"
                v-for="(item ,index) in buttons"
                :key="index"
                >
                    <el-button
                        :disabled="item.disabled"
                        @click="handleButton(item,index)"
                        type=""
                    >
                        <!-- {{item.index}} -->
                        {{item.num}}
                    </el-button>
                </div>
            </div>
            <div style="margin-top: 5vh; width: 100vw;justify-content: space-around;display: flex;">
                <el-button style="margin: auto;"
                    @click="reset"
                >重置游戏</el-button>
            </div>
        </div>
      

        <div class="peizhiwenjain">
            <!-- <h4>配置文件</h4> -->
            <div>数字打乱顺序 
                <el-switch
                    v-model="numberOrder"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    >
                </el-switch>
            </div>
            <div>不随机 答案是 50 </div>
            <div>打开随机答案
                <el-switch
                    v-model="answerOpen"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    >
                </el-switch>
            </div>
        </div>

    </div>
</body>
<script src="./package/element.js"></script>
<script src="./package/cookie.js"></script>
<script>
</script>
<script src="./package/index.js"></script>
</html>